<template>
  <div>
    <van-search 
      class="search"
      v-model="searchValue" 
      placeholder="请输入搜索关键词"
      shape="round"
      action-text="搜索"
      show-action
      @input="onSuggest"
      @search="onSearch"
    >
      <template #left>
        <van-icon @click="goBack" class="go-back" name="arrow-left" />
      </template>
      <template #action>
        <span @click="onSearch">搜索</span>
      </template>
    </van-search>

    <!-- 展示搜索建议 -->
    <template v-if="searchValue">
      <van-cell
        v-for="item in list"
        :key="item"
        icon="search"
        border
      >
        <template #title>
          <div v-html="getHighlightHTML(item)" />
        </template>
      </van-cell>
    </template>
    <!-- 展示搜索记录 -->
    <template v-else>
      <van-cell
        v-if="recordList.length > 0"
        title="历史记录"
        border
      >
        <van-icon @click="onClearRecord" name="delete-o" />
      </van-cell>
      <van-cell
        v-for="(item, i) in recordList"
        :key="item"
        :title="item"
        border
      >
        <van-icon @click="onRemoveRecord(i)" name="cross" />
      </van-cell>
    </template>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import { debounce, uniq } from 'lodash';
// import { debounce } from '@/utils';

// 防抖过后 当作正常函数使用
// 内部的被装饰的函数 只做本来功能即可 防抖的功能交给debounce函数
const onSuggest = debounce(function (v) {
  this.updateList(v);
}, 500);

export default {
  data () {
    return {
      searchValue: '',
      recordList: JSON.parse(localStorage.getItem('recordList')) || [],
    };
  },
  computed: {
    ...mapState('search', ['list']),
  },
  methods: {
    ...mapMutations('search', ['setList']),
    ...mapActions('search', ['updateList']),
    // 清空搜索记录
    onClearRecord () {
      // 1. 清空页面数据
      this.recordList = [];
      // 2. 更新存储的数据
      this.record();
    },
    // 删除搜索记录中的一条
    onRemoveRecord (i) {
      // 1. 更新页面数据
      this.recordList.splice(i, 1);
      // 2. 更新存储的数据
      this.record();
    },
    // 搜索建议
    onSuggest (v) {
      // 清空之前的搜索建议列表
      this.setList([]);
      // 防抖 + 改this
      onSuggest.call(this, v);
    },
    getHighlightHTML (item) {
      return item.replace(this.searchValue, `<span class="highlight">${ this.searchValue }</span>`);
    },
    // 搜索
    onSearch () {
      if (!this.searchValue) {
        return;
      }
      // 1. 记录
      this.recordList = uniq(this.recordList.concat(this.searchValue));
      this.record();
      // 2. 跳页面
      this.$router.push({
        name: 'search-result',
        query: {
          searchValue: this.searchValue,
        },
      });
    },
    // 存储当前的搜索记录
    record () {
      localStorage.setItem('recordList', JSON.stringify(this.recordList));
    },
    // 回退
    goBack () {
      this.$router.go(-1);
    },
  },
}
</script>

<style lang="less" scoped>
.search {
  border-bottom: 1px solid #e9e9e9;
}
.go-back {
  margin-right: 16px;
}
::v-deep .highlight {
  color: red;
}
</style>